<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rain的学习日记</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
        <div class="container">
            <h1>Rain的学习日记</h1>
            <nav class="nav">
                <ul>
                    <li><a href="#" class="active">首页</a></li>
                    <li><a href="#">分类</a></li>
                    <li><a href="#">归档</a></li>
                    <li><a href="#">关于我</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="main container">
        <aside class="sidebar">
            <div class="profile">
                <img src="https://picsum.photos/id/64/150/150" alt="Rain的头像" class="avatar">
                <h2>程序员Rain</h2>
                <p>前端开发 | 技术爱好者</p>
                <p>记录学习过程中的点滴</p>
            </div>

            <div class="categories">
                <h3>分类</h3>
                <ul>
                    <li><a href="#">JavaScript</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">算法</a></li>
                    <li><a href="#">项目实践</a></li>
                </ul>
            </div>
        </aside>

        <section class="content">
            <div class="diary-list">
                <article class="diary-card" data-id="1">
                    <h3>探索CSS Grid布局</h3>
                    <div class="meta">
                        <span class="date">2023-10-15</span>
                        <span class="category">CSS</span>
                    </div>
                    <p>今天深入学习了CSS Grid布局系统，发现它比Flexbox更适合二维布局。创建了一个响应式图库作为练习...</p>
                    <button class="read-more">阅读更多</button>
                </article>

                <article class="diary-card" data-id="2">
                    <h3>JavaScript闭包实践</h3>
                    <div class="meta">
                        <span class="date">2023-10-10</span>
                        <span class="category">JavaScript</span>
                    </div>
                    <p>闭包是JavaScript中一个强大但容易混淆的概念。今天通过几个实际例子终于搞清楚了它的工作原理和应用场景...</p>
                    <button class="read-more">阅读更多</button>
                </article>

                <article class="diary-card" data-id="3">
                    <h3>算法学习：二叉树遍历</h3>
                    <div class="meta">
                        <span class="date">2023-10-05</span>
                        <span class="category">算法</span>
                    </div>
                    <p>复习了二叉树的三种遍历方式：前序、中序和后序。用JavaScript实现了递归和迭代两种解法...</p>
                    <button class="read-more">阅读更多</button>
                </article>
            </div>

            <div class="diary-detail hidden">
                <button class="back-btn">返回列表</button>
                <article>
                    <h2 id="detail-title">标题加载中...</h2>
                    <div class="meta">
                        <span id="detail-date" class="date">日期加载中...</span>
                        <span id="detail-category" class="category">分类加载中...</span>
                    </div>
                    <div id="detail-content">
                        <p>内容加载中...</p>
                    </div>
                </article>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2023 Rain的学习日记. 保留所有权利.</p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>